<template>
	<view class="content" :style="`paddingTop: ${statusHeight}`">
		<view class="header" :style="`bacground: ${headerColor}`">
			<view class="header-item" @click="openAddress">
				<view class="address">
					<text class="ellipsis1">宁波</text>
				</view>
				<view class="search" @click="searchTap">
					<text>智融金科</text>
				</view>
				<view class="information">
					<image src="../../static/images/groupIcon.svg"></image>
				</view>
			</view>
			<view class="navBar">
				<nav-bar :width="navWidth" :imgW="navImgW" :imgH="navImgH" :fontColor="fontColor" :list="navList" />
			</view>
		</view>
		<view class="switch">
			<banner :list="bannerList" />
		</view>
		<view class="navBar">
			<nav-bar :width="navWidth1" :imgW="navImgW1" :imgH="navImgH1" :fontColor="fontColor1" :list="navList1" />
		</view>
		<view class="notice">
			<view class="notice-left">
				<image src="../../static/table/Group.png" mode=""></image>
			</view>
			<view class="noticeBar">
				<u-notice-bar :text="noticeList" bgColor="#fff"  color="#333" fontSize="28rpx" icon="" direction="column" url=""></u-notice-bar>
			</view>
			<view class="more">更多</view>
		</view>
		<view class="layout">
			<view class="title">
				<text>智融学堂</text>
				<text class="more">更多</text>
			</view>
			<view class="layout-info">
				<u-scroll-list indicatorActiveColor="#FF6A2B" :indicator="classIndicator">
					<view class="layout-info-item" v-for="(item, index) in classroomList" :key="index">
						<image :src="item.img"></image>
						<view class="layout-info-item-content">
							<view class="title ellipsis1">{{item.title}}</view>
							<view class="dcs ellipsis1">{{item.dcs}}</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="layout">
			<view class="title">
				<text>精选信贷</text>
				<text class="more">更多</text>
			</view>
			<view class="credit dot">
				<swiper class="swiper" circular
					:current="index"
					:indicator-dots="indicatorDots" 
					:autoplay="autoplay" 
					:interval="interval" 
					:duration="duration"
					indicator-color="#E4E4E4"
					indicator-active-color="#FF9029"
					>
					<!-- <block v-for="(item, index) in list" :key="index"> -->
						<swiper-item class="swiper-item">
							<credit-list />
						</swiper-item>
						<swiper-item class="swiper-item">
							<credit-list />
						</swiper-item>
					<!-- </block> -->
				</swiper>
			</view>
		</view>
		<view class="layout">
			<view class="title">
				<text>精选房产</text>
				<text class="more">更多</text>
			</view>
			<view class="home-list dot">
				<swiper class="swiper" circular
					:current="index"
					:indicator-dots="indicatorDots" 
					:autoplay="autoplay" 
					:interval="interval" 
					:duration="duration"
					indicator-color="#E4E4E4"
					indicator-active-color="#FF9029"
					>
					<!-- <block v-for="(item, index) in list" :key="index"> -->
						<swiper-item class="swiper-item">
							<home-list />
						</swiper-item>
						<swiper-item class="swiper-item">
							<home-list />
						</swiper-item>
					<!-- </block> -->
				</swiper>
			</view>
		</view>
		<view class="layout">
			<view class="title">
				<text>智融学堂</text>
				<text class="more">更多</text>
			</view>
			<view class="layout-info">
				<u-scroll-list indicatorActiveColor="#FF6A2B" :indicator="classIndicator">
					<view class="layout-info-item" v-for="(item, index) in classroomList" :key="index">
						<image :src="item.img"></image>
						<view class="layout-info-item-content">
							<view class="title ellipsis1">{{item.title}}</view>
							<view class="dcs ellipsis1">{{item.dcs}}</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="layout">
			<view class="title">
				<text>市场资讯</text>
				<text class="more">更多</text>
			</view>
			<view class="info-list">
				<info-list />
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" 
			:loading="loading" 
			:columns="columns" 
			@change="changeHandler"
			@cancel="cancel"
			:showToolbar="true"
			itemHeight="80">
			</u-picker>
	</view>
	
</template>

<script>
	import navBar from './component/navBar.vue'
	import banner from './component/swiper.vue'
	import creditList from '../../components/credit/list.vue'
	import homeList from '../../components/homeList/list.vue'
	import infoList from '../../components/infiList/list.vue'
	export default {
		components: {
			navBar,
			banner,
			creditList,
			homeList,
			infoList,
		},
		data() {
			return {
				statusHeight: getApp().globalData.statusBarHeight,
				//组件nav 每一个item的大小
				navWidth: '25%',
				navWidth1: '20%',
				//  组件nav image 大小
				navImgW: '52',
				navImgH: '52',
				navImgW1: '76',
				navImgH1: '76',
				//组件nav 字体颜色
				fontColor: '#FFF',
				fontColor1: '#333',
				// 头部背景颜色
				headerColor: '#FF6A2B',
				// 组件nav 内容信息
				navList: [
					{
						name: '信用优化',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '财务优化',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '资产配置',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '融资助贷',
						img: '../../static/table/Group.png',
						url: ''
					},
				],
				navList1: [
					{
						name: '信用优化',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '财务优化',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '资产配置',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '融资助贷',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '融资助贷',
						img: '../../static/table/Group.png',
						url: ''
					},
					{
						name: '融资助贷',
						img: '../../static/table/Group.png',
						url: ''
					},
				],
				// banner 信息
				bannerList: [
					{
						img: '../../static/images/bgCar01.png',
						url: ''
					},
					{
						img: '../../static/images/bgCar03.png',
						url: ''
					}
				],
				noticeList: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'],
				text: 'sdfasdfasdfasdf',
				speed: 20,
				indicator: true,
				classroomList: [
					{
						img: "../../static/images/bgCar01.png",
						title: '智融金科第101期创说会',
						dcs: '讲解那些负债的结构'
					},{
						img: "../../static/images/bgCar01.png",
						title: '智融金科第101期创说会',
						dcs: '讲解那些负债的结构'
					},{
						img: "../../static/images/bgCar01.png",
						title: '智融金科第101期创说会',
						dcs: '讲解那些负债的结构'
					}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				index: 0,
				classIndicator: false,
				
				show: false,
				loading: false,
				columns: [
						['中国', '美国'],
						['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
						['深圳', '厦门', '上海', '拉萨'],
						['得州', '华盛顿', '纽约', '阿拉斯加']
				]
			}
		},   
		onLoad() {

		},
		methods: {
			openAddress(){
				this.show = true
			},
			searchTap(){
				uni.navigateTo({
					url: '../search/search'
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					// this.loading = true
					// 模拟网络请求
					uni.$u.sleep(300).then(() => {
							picker.setColumnValues(1, this.columnData[index])
							this.loading = false
					})
				}
			},
			cancel(){
				this.show = false
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		background: #F5F5F5;
	}
	.content{
		padding-bottom: 20rpx;
	}
	.header{
		background: #FF6A2B;
		.header-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 32rpx 32rpx 0;
			.address{
				width: 20%;
				text{
					width: 100%;
					position: relative;
					padding-left: 35rpx;
					color: #FFF;
					font-family: Source Han Sans CN;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					&::before{
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 28rpx;
						height: 28rpx;
						background: url(../../static/images/addressIcon.svg) no-repeat left center;
						background-size: 28rpx 28rpx;
					}
				}
			}
			.search{
				height: 56rpx;
				line-height: 56rpx;
				width: 62%;
				background: #FFF;
				border-radius: 100rpx;
				margin-left: 3%;
				text{
					position: relative;
					padding-left: 40rpx;
					color: #999999;
					font-family: Source Han Sans CN;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					margin-left: 20rpx;
					&::before{
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 28rpx;
						height: 28rpx;
						background: url(../../static/images/searchIcon.svg) no-repeat right center;
						background-size: 28rpx 28rpx;
					}
				}
			}
			.information{
				width: 15%;
				height: 48rpx;
				text-align: right;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	.navBar{
		padding: 30rpx 0;
	}
	.notice{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #FFF;
		margin: 0 auto;
		border-radius: 10rpx;
		padding: 20rpx 0rpx;
		margin: 0 30rpx;
		.notice-left{
			width: 15%;
			height: 36rpx;
			padding-left: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.noticeBar{
			width: 75%;
		}
		.more{
			width: 15%;
			border-left: 1rpx solid #ccc;
			font-size: 24rpx;
			color: #333;
			text-align: center;
		}
	}
	.layout{
		padding: 0 30rpx;
		margin-top: 30rpx;
		&-info{
			
			&-item{
				width: 466rpx;
				background: #FFF;
				border-radius: 14rpx;
				margin-right: 32rpx;
				image{
					width: 466rpx;
					max-height: 262rpx;
					border-radius: 14rpx 14rpx 0 0;
				}
				&-content {
					padding: 30rpx;
					.title{
						font-size: 32rpx;
						color: #333;
						margin: 0 !important;
						padding: 0 !important;
					}
					.dcs{
						font-size: 26rpx;
						color: #999;
					}
				}
			}
			
		}
		
		.credit{
			padding: 30rpx 30rpx 0rpx;
			background: #FFF;
			border-radius: 14rpx;
			.swiper{
				height: 680rpx;
			}
		}
		.home-list{
			padding: 0 0 10rpx;
			background: #FFF;
			border-radius: 14rpx;
			.swiper{
				height: 530rpx;
			}
		}
		.info-list{
			padding: 0 0 10rpx;
			background: #FFF;
			border-radius: 14rpx
		}
	}
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
		margin: 0 0 20rpx;
		text{
			font-size: 36rpx;
			color: #333;
		}
		.more{
			position: relative;
			font-size: 28rpx;
			color: #666;
			padding-right: 45rpx;
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				width: 40rpx;
				height: 40rpx;
				background: url(../../static/images/prvIcon.svg) no-repeat right center;
				background-size: 40rpx 40rpx;
			}
		}
	}
	
	
	
	::v-deep .dot .uni-swiper-dot {
		width: 10rpx;
		height: 10rpx;
	}
	::v-deep .dot .uni-swiper-dot-active {
		width: 20rpx;
		border-radius: 10rpx;
	}
</style>
